<template>
  <div>
      <nav-bar class="detail-nav-bar">
            <p slot="left" class="back" @click="back">
                 <img src="~assets/img/common/back.svg" alt="">
            </p>
            <div slot="center" class="title">
                 <p v-for="(item,index) in titles"  
                 :key="index" 
                 class="title-item" 
                 :class="{act:index===curIndex}" @click="titIndex(index)">
                     {{item}}
                 </p>
            </div>
      </nav-bar>
  </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
export default {
  name: 'CodeDetailnavbar',
  components: { NavBar },
  directives: { },
  data() {
    return {
        titles:['商品','参数','评论','推荐'],
        curIndex:0
    };
  },
  mounted() {
    
  },
  methods: {
    titIndex(idx){
     this.curIndex=idx
     this.$emit('titIndex',idx)
    },
    back(){
      return this.$router.go(-1);
    }
  },
};
</script>

<style scoped>
.detail-nav-bar{
  border-bottom: 1px solid #ccc;
}
.title{
  display: flex;
  }
  .title-item{
    flex:1;
    text-align: center;
    font-size: 14px;
  }
  .act{
    color:rgb(189, 201, 87);
  }
  .back{
    height:44px;
    overflow: hidden;
  }
  .back img{
    margin:12px 0 0 12px;
  }
</style>